<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/icon.css">


<!--<link rel="stylesheet" href="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/themes/ui-lightness/jquery.ui.all.css">-->
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.18.custom/jquery-1.7.1.min.js"></script>

<script src="<?= base_url() ?>file/js/jquery-ui-1.8.18.custom/jquery.ui.core.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.18.custom/jquery.ui.widget.js"></script>

<script src="<?= base_url() ?>file/js/jquery-ui-1.8.18.custom/jquery.ui.position.js"></script>


<script src="<?= base_url() ?>file/js/jquery-ui-1.8.18.custom/jquery.ui.autocomplete.js"></script>
<script src="<?= base_url() ?>file/js/jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>

<style>
	.ui-autocomplete {
		max-height: 100px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		/* add padding to account for vertical scrollbar */
		padding-right: 20px;
	}
	
	</style>

<script type="text/javascript"> 
var i = 1;
$(document).ready( function () {
	$('#addNewRow').click(function(){
		add_tuple = "<tr>"+
				"<td class='readonly'><input type='checkbox' id='check_"+i+"' name='check[]'/></td>"+
				"<td><input style='text-align:left;' type='text' id='iccid_"+i+"' name='iccid[]' size='30' onfocus='getIccid("+i+")' onChange='getIccid("+i+")'/></td>"+
				"<td class='readonly'><input style='text-align:center;' type='text' id='buying_"+i+"' name='buying[]' readonly='true'/></td>"+
				"<td><input style='text-align:center;' type='text' size='50' name='desc[]' id='desc_"+i+"' readonly='true'/></td>"+
				"<td class='readonly'><input style='text-align:center;' type='text' id='price_"+i+"' name='price[]' readonly='true'/></td>"+
				"</tr>";
		$('#table-updateable').append(add_tuple);
		$("#nomorBarang_"+i+"").focus();
		i++;
	});

	$("#sales-id").change(function(){
		var sales = $("#sales-id").val();
		$('#sales-name').val(sales);
		$('#outlet-name').val("");
		$.ajax({
			url: "<?php echo base_url(); ?>index.php/returns/getOutlet/"+sales,
			dataType:"json",
			success:function(data){
				$('.clusterClass').remove();
				$.each(data, function(i,n){
					add_tuple = "<option class='clusterClass return-outlets' value='"+n["outlet_id"]+"'> "+n["outlet_name"].toLowerCase()+" </option>";                
					$('#outlet-id').append(add_tuple);
				});    
			},
			error: function(data){}
		});
	});


});
function hapus() {

	// var table = document.getElementById('table-updateable');
	// var rowCount = table.rows.length;
	// for(var i=1; i<rowCount; i++) {
	// 	var row = table.rows[i];
	// 	if (row.cells[0] != null)
	// 	{
	// 		var chkbox = row.cells[0].childNodes[0];
	// 		if(null != chkbox && true == chkbox.checked) {
	// 			table.deleteRow(i);
	// 		}
	// 	}
	// }
	$('#select_all').removeAttr('checked');
	$('input:checked').each(function() {
		$('input:checked').parent().parent().remove();
		// $('button#button-remove').hide();
	});
}


function showoutlet() {
	var outlet_id = $("#outlet-id").val();
	$("#outlet-name").val(outlet_id);
	updateValue();
}

function getIccid(varTest) {
	$("#iccid_"+varTest).autocomplete({
		source: function(request, response){
			$.post(
				"<?php echo base_url(); ?>index.php/returns/getRelatedIccid/"+$("#iccid_"+varTest).val(), 
				{data:request.term}, 
				function(data){     
					response($.map(data, function(item) {
						return {
							label: item.iccid,
							value: item.iccid
						}
					}))
				}, 
				"json"
			);
		},
		minLength: 2,  //Maximum ICCID lenght is 20
		dataType: "json",
		cache: false,
		focus: function(event, ui) {
			return false;
		},
		select: function(event, ui) {
			this.value = ui.item.label;
			updateValue(this.value, varTest);
		return false;
		}
	});
}

var xx = 1;
function updateValue(iccid, iteraras) {
	// var iccid = null;
	// var iccid = document.getElementById("iccid_"+soide).value;
	var flag = false;
	// tempIccid = $("#iccid_"+soide).val();
		
	$.ajax({
		url: "<?php echo base_url(); ?>index.php/returns/getReturnItem/"+iccid,
		dataType:"json",
		success:function(data){
			$.each(data, function(i,n){
					var date = n["created_on"].split(' ');
					var price = n["price"] - ((n["price"]*n["discount"])/100);
					$("#iccid_"+xx).val(n["iccid"]);
					$("#buying_"+xx).val(date[0]);
					$("#desc_"+xx).val(n["item_name"]);
					$("#price_"+xx).val(digitGrouping(price));

					flag = true;
					xx++;
			});	
		},
		error: function(data){	
		}
	});
	
	if (flag = false)
	{
		$("#buying_"+soide).val("");
		$("#desc_"+soide).val("");
		$("#price_"+soide).val("");
	}	
}

function clickAll() {
	var checked = false;
	if (document.getElementById("select_all").checked == true)
		checked = true;
	var tbl = document.getElementById("table-updateable");
	var rowLen = tbl.rows.length;
	for (var idx=1;idx<rowLen;idx++) {
		var row = tbl.rows[idx];
		var cell = row.cells[0];
		var node = cell.lastChild;
		node.checked = checked;
	}
} 

function digitGrouping(price) {
	price += '';
	x = price.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '.00';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2 ;
}


// end of <script>

	// function deleteRow() {
	// 	var tbl = document.getElementById("table-updateable");
	// 	var error = false;
	// 	if (document.getElementById("select_all").checked == false)
	// 		error = true;
	// 	var tbl = document.getElementById("table-updateable");
	// 	var rowLen = tbl.rows.length;
	// 	for (var idx=1;idx<rowLen;idx++) {
	// 		var row = tbl.rows[idx];
	// 		var cell = row.cells[0];
	// 		var node = cell.lastChild;
	// 		if (node.checked == true) {
	// 			error = false;
	// 			break;
	// 		}
	// 	}
	// 	if (error == true) {
	// 		alert ("Checkbox tidak di cek, proses tidak dapat dilanjutkan");
	// 		return;
	// 	}
	// 	if (document.getElementById("select_all").checked == true) {
	// 		deleteAll();
	// 		document.getElementById("select_all").checked = false;
	// 	} else {
	// 		var table = document.createElement("table");
	// 		bufferRow(table);
	// 		deleteAll();
	// 		reIndex(table);
	// 	}
	// }
	
	
	
	// var iccidname = new Array("N/A");
	// var iccidbuying = new Array("N/A");
	// var iccidprice = new Array("N/A");
	// var nama = new Array("N/A");
	// var price = new Array("N/A");
	// var buying = new Array("N/A");
	// var x = 1;
	// var y = 1;
	// var z = 1;
	
	// <?php foreach($itemname as $item):?>
	// 	iccidname[x] = "<?php echo $item->iccid?>";
	// 	nama[x] = "<?php echo $item->item_name?>";
	// 	x++;
	// <?php endforeach?>
	
	// <?php foreach($buyingdate as $item):?>
	// 	iccidbuying[y] = "<?php echo $item->iccid?>";
	// 	var str = "<?php echo $item->created_on?>";
	// 	buying[y] = str.substring(0, 10);
	// 	y++;
	// <?php endforeach?> 
	
	// var harga = 0;
	// var discount = 0;
	
	// <?php foreach($itemprice as $item):?>
	// 	iccidprice[z] = "<?php echo $item->iccid?>";
	// 	harga = "<?php echo $item->price?>";
	// 	discount = "<?php echo $item->discount?>";
	// 	price[z] = harga - ((discount * harga) / 100);
	// 	z++;
	// <?php endforeach?> 
		
	// function tes(index) {
	// 	var tampilname = 0;
	// 	var x = iccidname.length;
		
	// 	var tampilbuying = 0;
	// 	var y = iccidbuying.length;
		
	// 	var tampilprice = 0;
	// 	var z = iccidprice.length;
		
	// 	var check = document.getElementById("nomorBarang"+index).value;
		
	// 	for(var i=1; i<=x; i++){
	// 		if(iccidname[i] == check){
	// 			tampilname = i;
	// 			i=x+1;
	// 		}
	// 	}
		
	// 	for(var i=1; i<=y; i++){
	// 		if(iccidbuying[i] == check){
	// 			tampilbuying = i;
	// 			i=y+1;
	// 		}
	// 	}
		
	// 	for(var i=1; i<=z; i++){
	// 		if(iccidprice[i] == check){
	// 			tampilprice = i;
	// 			i=z+1;
	// 		}
	// 	}
		
	// 	if(tampilname==0){
	// 		//alert("Barang Sudah Di Return atau Barang Belum Terjual atau ICCID salah");
	// 		//document.getElementById("nomorBarang["+index+"]").value = "";
	// 		document.getElementById("buying["+index+"]").value = "N/A";
	// 		document.getElementById("desc["+index+"]").value = "N/A";
	// 		document.getElementById("price["+index+"]").value = "N/A";
	// 	}
	// 	else if(tampilbuying==0){
	// 		alert("Barang Sudah Di Return atau Barang Belum Terjual");
	// 		document.getElementById("nomorBarang"+index).value = "";
	// 	}
	// 	else{
	// 		document.getElementById("buying["+index+"]").value = buying[tampilbuying];
	// 		document.getElementById("desc["+index+"]").value = nama[tampilname];
	// 		document.getElementById("price["+index+"]").value = price[tampilprice];
	// 	}
	// }

</script>	
	
<!--<form id="form" action="<?=base_url() ?>index.php/returns/save" method="post">-->
<form id="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
	<div class="panel-wrap" style="height: auto">
		<div class="panel-header-div">Cluster Information</div>
		<div class="panel-body-div">
		
			<div class="left-panel-body">
				<?php foreach($cluster as $item):?>
					<h2><?php echo $item->territory_name?></h2>
				<?php endforeach?>
			</div>
			<div class="right-panel-body">
				<table class="table-right-panel" width="100%" border="solid black 1px">
					<tr align="center" class="tr-colour">
						<th width="50%" align="center">Date</th>
						<th align="center">Return No</th>
					</tr>
					
					
					<tr align="center" class="gray">
						<td width="50%" align="center">
							<input type="text" id="date" name="return_date" onclick="this.value='';" value=""/>
						</td>
						<script type="text/javascript">
							var date = new Date();
							var hari = date.getDate();
							var day = (hari < 10) ? "0"+hari : hari;
							var mo = date.getMonth() + 1;
							var month = (mo < 10) ? "0"+mo : mo;
							var yy = date.getYear();
							var year = (yy < 1000) ? yy + 1900 : yy;

							//document.write(day + " " + months[month] + " " + year);
							//document.write(day + "/ " + month + "/ " + year);
							document.getElementById("date").value = year + "-" + month + "-" + day;
								
							$(function() {
								$("#date").datepicker({ dateFormat: 'yy-mm-dd' });
							});
						</script>

						
						<td class="readonly" width="50%" align="center">
							<input type="text" name="return_no"  id="return_no" disabled="true" value="Auto"/>
							<!--<script language="JavaScript">
								document.getElementById("return_no").value = ;
							</script>-->
							
						</td>
						
					</tr>
				</table>
			</div>
			
		</div>
	</div>


	<div class="panel-wrap" style="height: auto">
		<div class="panel-header-div">Return Information</div>
		
		<div class="panel-body-div">
			<div class="child-panel-body">
				<div class="left-panel-body">
				
					<table class="table-right-panel" width="60%" border="solid black 1px">
						<tr align="center" class="tr-colour2">
							<th width="60%" align="center">Sales Name</th>
							<th width="40%" align="center">Sales ID</th>
						</tr>
						
						
						<tr align="center" class="gray">
							<td>
								
								<select name="sales_id" id="sales-id" >
									<option>--Pilih Sales Name--</option>
									<?php foreach($sales as $item):?>
										<option value="<?php echo $item->user_id?>"><?php echo ucwords(strtolower($item->user_name));?></option>
									<?php endforeach?>
								</select>
								
							</td>
							<td class="readonly" align="center">
								<input type="text" name="sales_name" id="sales-name" size="15" readonly="true" value=""/>
							</td>
							
							
						</tr>
					</table>
				</div>
			</div>
			<div class="child-panel-body">
				<div class="left-panel-body">
				
					<table class="table-right-panel" width="60%" border="solid black 1px">
						<tr align="center" class="tr-colour2">
							<th width="60%" align="center">Outlet Name</th>
							<th width="40%" align="center">Outlet ID</th>
						</tr>
						
						
						<tr align="center" class="gray">
							<td>
								<!--<div id="outlet">
								
								</div>-->
								<select name="outlet_id" class="return-outlets" id="outlet-id" onChange="showoutlet();">
									<option>--Pilih Outlet Name--</option>
								</select>
								<input type="hidden" value="1" name="name-outlet" id="name-outlet"/>
							</td>
							<td class="readonly" align="center">
								<input type="text" name="outlet_name" id="outlet-name" size="15" readonly="true" value=""/>
							</td>
							
							
						</tr>
					</table>
				</div>
			
			</div>
			<br><br>
			<div class="child-panel-body-2">
				<div class="buttons-2" style="width:25%;">
						<input type="button" id="addNewRow" value="Tambah" />
						<input type="button" onclick="hapus()" value="Hapus" />
				</div>
			</div>
		
		
						
			<div class="child-panel-body">
				
					<table class="table-right-panel" id="table-updateable" width="97%" style="margin-left: 19px; margin-right: 20px;">
						<tr align="center" class="tr-colour3" id="tr_select_all">
							<th><input type="checkbox" id="select_all" onclick="clickAll();"/></th>
							<th width="25%">ICCID</th>
							<th width="15%">Buying Date</th>
							<th width="45%">Description</th>
							<th width="10%">Price (Rp.)</th>							
						</tr>
						<tbody>

						</tbody>
						<!-- <tr class="clone">
							<td class="readonly"><input type="checkbox" id="check_0" name="check[]"/></td>
							<td><input style="text-align:left;" type="text" id="nomorBarang_0" name="nomorBarang[]" size="30" onfocus="getIccid(0)" onChange="tes(0)"/></td>
							<td class="readonly"><input style="text-align:center;" type="text" id="buying_0" name="buying[]" readonly="true"/></td>
							<td><input style="text-align:center;" type="text" size="50" name="desc[]" id="desc_0" readonly="true"/></td>
							<td class="readonly"><input style="text-align:center;" type="text" id="price_0" name="price[]" readonly="true"/></td>
						</tr> -->
					</table>
			</div>
		
			<div class="child-panel-body-2">
				<table class="table-right-panel" width="97%" style="margin-left: 19px; border: none; ">
					<tr style="height: 15px;">
						<td style="text-align: left; font-weight: bold; font-size: 1.3em;">Remark:</td>
						<td width="97%">
							<textarea name="remark" rows="6" cols="133" value="hjhjhj"></textarea>
							
						</td>
						<input type="hidden" value="1" name="jumlah_entry" id="jumlah_entry"/>
					</tr>
				</table>
			</div>
		
			<div class="child-panel-body-2">
				<div class="buttons-2" style="margin: 0 auto">
					<input type="submit" value="Submit"/>
				</div>
			</div>
		</div>
	</div>
</form>


